import React, {PureComponent} from "react";
import ArticleTitleWrapper from "./ArticleTitleWrapper";
import ArticleListWrapper from "./ArticleListWrapper";
import {connect} from "react-redux";
import ProjectWrapper from "./ProjectWrapper";
import {updateTitleChoice} from "../store/actionCreator";


// 文章标题和列表
class ArticleWrapper extends PureComponent {

    constructor(props) {
        super(props);

        this.changeTitleChoice = this.changeTitleChoice.bind(this);
    }

    render() {
        return (
            <div style={awStyle}>

                <ArticleTitleWrapper
                    choiceIndex={this.props.titleIndex}
                    changeChoice={this.changeTitleChoice}
                />

                {this.props.titleIndex === 0 ? <ArticleListWrapper/> : <ProjectWrapper/>}

            </div>
        );
    }

    changeTitleChoice(index) {

        if (index !== this.props.titleIndex) {
            this.props.changeTitleIndex(index);
        }
    }


}

const mapState = (state) => {
    return {
        titleIndex: state.getIn(["bodyReducer", "titleIndex"])
    };
};

const dispatchMapState = (dispatch) => {
    return {
        changeTitleIndex(index) {
            const action = updateTitleChoice(index);
            dispatch(action)
        }
    };
};


export default connect(mapState, dispatchMapState)(ArticleWrapper);


const awStyle = {
    width:866,
    marginTop: 30,
    borderRadius: 6,
    backgroundColor: "white",
    boxShadow: "2px 2px 2px #ccc",

};